<template>
  <div class="component-slid" v-if="show">
    <div
      v-if="placement == 'right'"
      :class="
        showSlid ? 'component-slid-right-open' : 'component-slid-right-out'
      "
    >
      <slot></slot>
    </div>
    <div
      v-if="placement == 'left'"
      :class="showSlid ? 'component-slid-left-open' : 'component-slid-left-out'"
    >
      <slot></slot>
    </div>
  </div>
  <div class="component-slid-top" v-if="show">
    <div
      v-if="placement == 'top'"
      :class="showSlid ? 'component-slid-top-open' : 'component-slid-top-out'"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "component-slid",
  props: {
    showSlid: {
      type: Boolean,
      default: false,
    },
    placement: {
      type: String, // content出现位置
      default: "right", // {left,top,bottom,right}
    },
    client: {
      // 内容区域的高度或者宽度，左边或者右边表示宽度，上边或者下边表示高度
      type: [String, Number],
      default: 300,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  created() {},
  mounted() {},
  updated() {
    //   至于这里给了一个延时器  主要是为了 返回时能完成 回退的一个动画效果
    setTimeout(() => {
      this.show = this.showSlid;
    }, 300);
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.component-slid {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  //   background: rgba(000, 000, 000, 0.3);

  //右侧滑入滑出
  .component-slid-right-open {
    position: absolute;
    top: 90px;
    right: 0;
    width: 493px;
    opacity: 1;
    animation: slid-right-open 0.5s ease;
    z-index: 1;
  }
  .component-slid-right-out {
    position: absolute;
    top: 90px;
    right: 0;
    width: 493px;
    animation: slid-right-out 0.5s ease;
    z-index: 1;
  }
  //右侧滑入滑出
  @keyframes slid-right-open {
    0% {
      opacity: 0;
      transform: translate3d(0, 0, 500px);
    }
    100% {
      transform: none;
    }
  }
  @keyframes slid-right-out {
    0% {
      transform: none;
    }
    100% {
      transform: translate3d(0, 0, -500px);
    }
  }

  //左侧滑入滑出
  .component-slid-left-open {
    position: absolute;
    top: 236px;
    left: 0px;
    width: 500px;
    opacity: 1;
    animation: slid-left-open 0.5s ease;
    z-index: 2;
  }
  .component-slid-left-out {
    position: absolute;
    top: 236px;
    left: 0px;
    width: 500px;
    animation: slid-left-out 0.5s ease;
    z-index: 2;
  }
  //左侧滑入滑出
  @keyframes slid-left-open {
    0% {
      opacity: 0;
      transform: translate3d(-500px, 0, 0);
    }
    100% {
      transform: none;
    }
  }
  @keyframes slid-left-out {
    0% {
      transform: none;
    }
    100% {
      opacity: 0;
      transform: translate3d(-500px, 0, 0);
    }
  }
}
.component-slid-top {
  width: 100%;
  display: flex;
  //上方滑入滑出
  .component-slid-top-open {
    position: absolute;
    top: 382px;
    left: 0;
    width: 100%;
    opacity: 1;
    animation: slid-top-open 0.5s ease;
    z-index: 1;
    display: flex;
    justify-content: center;
  }
  .component-slid-top-out {
    position: absolute;
    top: 382px;
    left: 0;
    width: 100%;
    animation: slid-top-out 0.5s ease;
    z-index: 1;
    display: flex;
    justify-content: center;
  }
  //上方滑入滑出
  @keyframes slid-top-open {
    0% {
      opacity: 0;
      transform: translate3d(0, -500px, 0);
    }
    100% {
      transform: none;
    }
  }
  @keyframes slid-top-out {
    0% {
      transform: none;
    }
    100% {
      opacity: 0;
      transform: translate3d(0, -500, 0);
    }
  }
}
</style>
